<template>
  <div class="ful">
    <div class="fulltext" v-for="(goods, index) in goodsinfo" :key="index">
      <div class="divs">
        <div>
          <input type="checkbox" />
        </div>
        <div class="lefts">
          <img :src="goods.img" width="75px" height="75px" class="imgs" />
        </div>
        <div class="rights">
          <div class="r-content">{{ goods.title }}</div>
          <div class="r-bottom">
            <div class="b-left">
              ￥
              <div class="counts">{{ goods.price }}</div>
            </div>
            <div class="b-right">
              <div class="b-right1" @click="cut(goods.price, index)">-</div>
              <div class="b-right3">{{ goods.num }}</div>
              <div class="b-right2" @click="add(goods.price, index)">+</div>
            </div>
          </div>
        </div>
      </div>
      <div class="botom">
        <div class="css4"><input type="checkbox" />全选合计:￥{{ price }}</div>
        <div><button class="css5">去结算</button></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goodsinfo: [],
      price: 0,
      counts: 0,
      checkeds: []
    };
  },
  mounted() {
    this.create();
    // this.pricecounts();
  },
  methods: {
    create() {
      let that = this;
      let i;
      that.$axios.get("/buycar").then(function(response) {
        that.goodsinfo = response.data.data;
        console.info(that.goodsinfo[0]);
        for (i = 0; i < that.goodsinfo.length; i++) {
          that.price += that.goodsinfo[i].price * that.goodsinfo[i].num;
        }
      });
    },
    // pricecounts() {
    //   let i;
    //   let that = this;
    //   // console.info(goodsinfo);
    //   console.info(this.goodsinfo);
    //   for (i = 0; i < that.goodsinfo.length; i++) {
    //      console.info(i);
    //     // that.price += that.goodsinfo[i].unit_price * that.goodsinfo[i].num;
    //   }
    // },
    handleChange(value) {
      console.log(value);
    },
    changes(goodsinfo) {
      let i;
      let that = this;
      this.checkeds.state = !this.checkeds.state;
      for (i = 0; i < goodsinfo.length; i++) {
        if (this.checkeds[i] != null) {
          that.price += that.goodsinfo[i].price * that.goodsinfo[i].num;
        }
      }
    },

    add(goods_price, index) {
      console.info(index);

      let that = this;

      if (that.goodsinfo[index].num < that.goodsinfo[index].inventory) {
        that.goodsinfo[index].num = that.goodsinfo[index].num + 1;
        that.price += goods_price * 1;
      }
    },
    cut(goods_price, index) {
      console.info(index);

      let that = this;

      if (that.goodsinfo[index].num > 1) {
        that.goodsinfo[index].num = that.goodsinfo[index].num - 1;
        that.price -= goods_price * 1;
      }
    }
    // btn(product_id) {
    //   let that = this;
    //   that.price = unit_price * counts;
    // }
  }
};
</script>

<style>
.ful {
  width: 375px;
  height: 812px;
  margin: 0 auto;
}
.counts {
  width: 45px;
  height: 60px;
}
.css4 {
  width: 180px;
  height: 20px;
  position: relative;
  left: 27px;
  top: 15px;
}
.css5 {
  background-color: #e54346;
  border: none;
  width: 60px;
  height: 40px;
  position: relative;
  top: 4px;
  left: 190px;
  border: 1px solid #aaa;
  border-radius: 12px;
  color: white;
}

.css1 {
  position: relative;
  top: 30%;
}
.botom {
  position: fixed;
  bottom: 0px;
  float: left;
  width: 370px;
  height: 50px;
  background-color: #d3d3d3;
  border: 1px solid #fff;
  border-radius: 10px;
  display: flex;
  flex: row;
}
.divs {
  width: 370px;
  height: 70px;
  display: flex;
  flex: row;
  border: 1px solid #d3d3d3;
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 10px;
  margin-top: 3px;
}
.fulltext {
  margin: 0;
  width: 370px;
  height: 80px;
  /* background-color: red; */
  display: flex;
  flex: row;

  /* background-color: aqua; */
}
.lefts {
  width: 75px;
  height: 88px;

  /* background-color: blanchedalmond; */
}
.rights {
  width: 180px;
  height: 88px;
  display: flex;
  flex-direction: column;
  /* background-color: chartreuse; */
  text-align: left;
}
.imgs {
  border: 1px #fff;
  border-radius: 10px;
}

.r-bottom {
  display: flex;
  flex: row;
  width: 375px;
  height: 80px;
  /* background-color: blue; */
}
.b-left {
  display: flex;
  flex: row;
  position: relative;
  top: 30%;
  color: red;
}
.b-right {
  position: relative;
  top: 16.8%;
  left: 29%;
  border: 1px solid #dcdfe6;
  width: 100px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
}
.b-right1 {
  border: 1px solid #dcdfe6;
  border-radius: 10px;
  height: 28px;
  width: 30px;
  text-align: center;
  line-height: 29px;
  background-color: #f5f7fa;
}
.b-right2 {
  border: 1px solid #dcdfe6;
  border-radius: 10px;
  height: 28px;
  width: 30px;
  text-align: center;
  line-height: 29px;
  background-color: #f5f7fa;
  position: relative;
  left: 2px;
}
.b-right3 {
  width: 40px;
  height: 28px;
  /* background-color: aquamarine; */
  text-align: center;
  line-height: 28px;
}
</style>
